<template>
  <div class="week">
    <div class="week_title">
      周末去哪儿
    </div>
    <ul>
      <li class="weekList" v-for="item in weekList" :key="item.id">
        <div class="weekImg">
          <img :src="item.imgUrl" alt="">
		</div>
          <div class="weekP">
            <p>{{item.title}}</p>
            <p>{{item.subTitle}}</p>
          </div>
      </li>
    </ul>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      weekList: [{
        id: "01",
        imgUrl: "https://imgs.qunarzz.com/sight/source/1505/4e/3e87ee62e59cdb.jpg_r_640x214_fe6cc902.jpg",
        title: "杭州必游TOP10",
        subTitle: "杭州，前世今生与你有一场美丽约会",
      }, {
        id: "02",
        imgUrl: "https://imgs.qunarzz.com/sight/source/1510/c1/afe3ab32b3bc23.jpg_r_640x214_beb61760.jpg",
        title: "青山秀水，精致暖汤",
        subTitle: "天然高品质温泉，这个冬天秀美容颜首选",
      }, {
        id: "03",
        imgUrl: "https://imgs.qunarzz.com/sight/source/1505/9f/7d45cc38259e0.jpg_r_640x214_156f4299.jpg",
        title: "承载杭城的历史之地",
        subTitle: "饱经沧桑的地方诉述着这座城的段段衷肠",
      }, ]
    }
  }
}

</script>
<style scoped="" lang="scss">
.week {
  .week_title {
    padding: 0.24rem;
    font-size: 0.32rem;
  }

  .weekList {
    background: #fff;
    font-size: 0.28rem;
    margin-bottom: 0.1rem;

    .weekImg {
      overflow: hidden;
      height: 0;
      padding-bottom: 37.4375%;

      img {
        width: 100%;
        height: auto;
      }
    }

    .weekP {
      padding: 0 0.2rem;

      p {
        margin: 0.2rem;
      }
    }
  }
}

</style>
